<template>
    <view-content @longpress="showMenu" @click="getDetail">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="movieItem"  >
        <div class="left">
            <img @click.stop="showImage" v-lazy="mitem.img" alt="">
        </div>
        <div class="center">
            <div class="m_title">{{mitem.nm}}</div>
            <div class="m_score" v-if="mitem.globalReleased==true">评分：<span>{{mitem.sc}}</span></div>
            <div class="m_score" v-if="mitem.globalReleased==flase"><span>{{mitem.wish}}</span>人想看</div>
            <div>主演:{{mitem.str}}</div>
            <div>{{mitem.showInfo}}</div>
        </div>
        <div class="right">
            <button class="btnBuy" v-if="mitem.globalReleased==true">购票</button>
            <button @click="preTicket" class="btnPre" v-if="mitem.globalReleased==false">预售</button>
        </div>
        
    </div>
    </view-content>
    
</template>

<script>
import {mapActions} from "vuex"
import {formatData} from "../utils/datautils.js"
import saveCollectionVue from '../views/saveCollection.vue';
    export default {
        name: "movieItem",
        props:["mitem"],
        methods:{
            ...mapActions(["showPreviewImage"]),
            preTicket(){
                this.$toast("现在还不能买票")
            },
            showMenu(event){
                console.log(event)
                this.showActionSheet({
                    itemList:["查看详情","添加收藏","收藏记录"],
                    success:res=>{
                       if(res==0){
                           this.getDetail();
                       }
                       else if(res==1){
                           let saveCollection = localStorage.getItem("saveCollection")||[]
                           if(!Array.isArray(saveCollection)){
                               saveCollection=JSON.parse(saveCollection)
                           }
                           let index = saveCollection.findIndex(item=>{
                               return item.id==this.mitem.id
                           })
                           if(index!=-1){
                               this.$toast("你已经收藏过了")
                               this.$router.push({
                                   name:"saveCollection"
                               })
                               return
                           }
                           let obj ={...this.mitem,s_time:formatData(new Date())}
                            saveCollection.push(obj)
                            localStorage.setItem("saveCollection",JSON.stringify(saveCollection))
                           this.$router.push({
                               name:"saveCollection"
                           })
                       }
                       else if(res==2){
                           this.$router.push({
                               name:"saveCollection"
                           })
                       }
                    }
                })
            },
            test(event){
                console.log("test click")
                console.log(event)
            },
            getDetail(){
                this.$router.push({
                    name:"detail",
                    query:{
                        id:this.mitem.id
                    }
                })
            },
            showImage(){
                this.$emit("showImage",this.mitem.p_img)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";
    .title{
        color: #333;
        font-size: .28rem;
        margin-left: .1rem;
        margin-top: .1rem;
        margin-bottom: .1rem;
    }
    .movieItem {
        border-bottom: 1px solid lightgray;
        @include flexbox();
        box-sizing: border-box;
        padding: .1rem;

        >.left {
            width: 1.28rem;

            img {
                width: 100%;
                display: block;
                /* 解决下边大的多余部分*/
            }
        }

        .center {
            flex: 1;
            color: gray;
            font-size: .24rem;
            margin-left: .1rem;
            margin-right: .1rem;

            >* {
                font-size: inherit;
            }

            .m_title {
                font-size: .36rem;
                font-weight: bold;
                color: #000000;
            }

            .m_score {

                span {
                    color: orange;
                    font-size: inherit;
                }
            }
        }

        .right {
            width: 1.8rem;
            @include flexbox();
            justify-content: center;
            align-items: center;

            .btnBuy {
                width: 1.2rem;
                height: .6rem;
                background-color: $primaryColor;
                border: none;
                color: #ffffff;
                border-radius: .1rem;
                font-size: .24rem;
            }
            .btnPre{
                @extend .btnBuy;
                background-color:#3c9fe6;
            }
        }
    }
</style>